<template>
    <div class="notice-management-container">
        <!-- 左侧菜单 -->
        <div class="left-menu">
            <div
                class="menu-item"
                :class="{ active: activeTab === 'notice-management' }"
                @click="switchTab('notice-management')"
            >
                <i class="fas fa-bullhorn"></i> <!-- 通知公告图标 -->
                <span>通知公告管理</span>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="right-content" v-if="activeTab === 'notice-management'">
            <!-- 功能栏 -->
            <div class="action-bar">
                <div class="search-bar">
                    <div class="date-picker">
                        <label for="start-date">开始日期：</label>
                        <input
                            id="start-date"
                            v-model="startDate"
                            type="date"
                        />
                    </div>
                    <div class="date-picker">
                        <label for="end-date">结束日期：</label>
                        <input
                            id="end-date"
                            v-model="endDate"
                            type="date"
                        />
                    </div>
                    <button @click="handleSearch">
                        <span>查询</span>
                    </button>
                </div>
                <button class="add-button" @click="handleAdd">
                    <i class="fas fa-plus"></i> <!-- 新增图标 -->
                    <span>新增</span>
                </button>
            </div>

            <!-- 数据表格 -->
            <div class="data-table" v-if="activeTab === 'notice-management'">
                <table>
                    <thead>
                        <tr>
                            <th v-for="column in columns" :key="column">{{ column }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in paginatedData" :key="item.id">
                            <td>{{ item.title }}</td>
                            <td>{{ item.publishDate }}</td>
                            <td>{{ item.publisher }}</td>
                            <td>
                                <i class="fas fa-edit edit-icon" @click="editItem(item)"></i> <!-- 修改图标 -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页组件 -->
            <div class="pagination" v-if="activeTab === 'notice-management'">
                <button
                    :disabled="currentPage === 1"
                    @click="currentPage--"
                >
                    上一页
                </button>
                <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
                <button
                    :disabled="currentPage === totalPages"
                    @click="currentPage++"
                >
                    下一页
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

// 当前激活的菜单项
const activeTab = ref("notice-management");

// 表格列名
const columns = ref([
    "标题",
    "发布日期",
    "发布人",
    "修改",
]);

// 模拟数据（实际应从数据库获取）
const data = ref([
    {
        id: 1,
        title: "系统升级通知",
        publishDate: "2023-10-01",
        publisher: "管理员",
    },
    {
        id: 2,
        title: "国庆节放假安排",
        publishDate: "2023-09-28",
        publisher: "人事部",
    },
    // 更多数据...
]);

// 查询功能
const startDate = ref("");
const endDate = ref("");
const filteredData = ref(data.value);

// 分页功能
const currentPage = ref(1);
const pageSize = ref(10); // 每页显示的数据条数

// 计算分页后的数据
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredData.value.slice(start, end);
});

// 计算总页数
const totalPages = computed(() => {
    return Math.ceil(filteredData.value.length / pageSize.value);
});

// 处理搜索
const handleSearch = () => {
    if (startDate.value || endDate.value) {
        filteredData.value = data.value.filter((item) => {
            const publishDate = new Date(item.publishDate);
            const start = startDate.value ? new Date(startDate.value) : null;
            const end = endDate.value ? new Date(endDate.value) : null;

            return (
                (!start || publishDate >= start) &&
                (!end || publishDate <= end)
            );
        });
    } else {
        filteredData.value = data.value;
    }
    currentPage.value = 1; // 搜索后重置到第一页
};

// 新增通知公告
const handleAdd = () => {
    // 打开新增通知公告的弹窗或页面
    console.log("新增通知公告");
};

// 修改通知公告
const editItem = (item) => {
    // 打开修改通知公告的弹窗或页面
    console.log("修改通知公告:", item);
};

const switchTab = (tab) => {
    activeTab.value = tab;
};

// 初始化数据
onMounted(() => {
    // 模拟从数据库获取数据
    // 实际应使用API调用
    console.log("数据加载完成");
});
</script>

<style scoped>
.notice-management-container {
    display: flex;
    height: 100%;
}

/* 左侧菜单 */
.left-menu {
    width: 200px;
    background-color: #f5f5f5; /* 淡灰色背景 */
    padding: 20px;
    border-right: 1px solid #ddd; /* 右侧分割线 */
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #333;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
}

.menu-item:hover {
    background-color: #e0e0e0; /* 悬停背景色 */
}

.menu-item.active {
    background-color: #3498db; /* 激活背景色 */
    color: white;
}

.menu-item i {
    font-size: 24px; /* 图标大小 */
}

.menu-item span {
    font-size: 14px; /* 文字大小 */
}

/* 右侧内容 */
.right-content {
    flex-grow: 1;
    padding: 20px;
}

/* 功能栏 */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-picker {
    display: flex;
    align-items: center;
    gap: 5px;
}

.date-picker label {
    font-size: 14px;
    color: #333;
}

.date-picker input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.search-bar button {
    padding: 8px 16px;
    background-color: #3498db; /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.search-bar button:hover {
    background-color: #2980b9; /* 按钮悬停效果 */
}

.add-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #28a745; /* 绿色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.add-button:hover {
    background-color: #218838; /* 按钮悬停效果 */
}

/* 数据表格 */
.data-table {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-right: 1px solid #ddd; /* 列竖线分割 */
    border-bottom: 1px solid #ddd; /* 行横线分割 */
}

th:last-child,
td:last-child {
    border-right: none; /* 最后一列不加竖线 */
}

th {
    background-color: #3498db; /* 表头背景色 */
    color: white;
}

tr:hover {
    background-color: #f5f5f5; /* 行悬停效果 */
}

/* 修改图标 */
.edit-icon {
    font-size: 18px;
    color: #3498db;
    cursor: pointer;
}

.edit-icon:hover {
    color: #2980b9; /* 悬停效果 */
}

/* 分页组件 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination button {
    padding: 8px 16px;
    background-color: #3498db; /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.pagination button:disabled {
    background-color: #95a5a6; /* 禁用状态 */
    cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
    background-color: #2980b9; /* 按钮悬停效果 */
}

.pagination span {
    font-size: 14px;
    color: #333;
}
</style>